<template>
  <div
    v-if="show"
    class="fixed bg-mask-6 w-full h-full left-0 top-0 flex justify-center items-center z-3"
  >
    <div class="w-350px h-269px bg-white flex items-center flex-col relative">
      <img :src="CouponSuccessIcon" class="mt-31px" alt="" />
      <div class="color-word mt-22px font-bold text-22px leading-33px h-33px">恭喜您，领取成功</div>
      <div class="text-14px leading-21px h-21px" style="color: #979797">
        可在会员中心><span class="color-main cursor-pointer" @click="gocoupon">我的优惠卷</span
        >里查看详情
      </div>
      <div class="flex mt-23px text-14px">
        <div
          v-if="props.canuse"
          class="bg-coupon w-87px h-33px text-center leading-33px text-white font-bold rounded-2px cursor-pointer"
          @click="use"
        >
          立即使用
        </div>
        <div
          style="background: #c8c8c8"
          class="w-87px h-33px text-center leading-33px text-white font-bold ml-22px rounded-2px cursor-pointer"
          @click="close"
        >
          关闭
        </div>
      </div>
      <div class="absolute left-9px bottom-5px" style="color: #808080">{{ count }}s后自动关闭</div>
      <div class="absolute -top-21px -right-21px cursor-pointer" @click="click">
        <img :src="CloseLoginIcon" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import CouponSuccessIcon from '@renderer/assets/couponSuccess.svg'
import CloseLoginIcon from '@renderer/assets/closeLogin.svg'
import _ from 'lodash'
const router = useRouter()
const count = ref<number>(10)
const props = defineProps({
  value: {
    type: Boolean,
    default: false
  },
  canuse: {
    type: Boolean,
    default: true
  }
})
const emits = defineEmits(['update:value', 'on:use'])
const show = computed({
  get: () => props.value,
  set: (v) => {
    emits('update:value', v)
  }
})
let timer: null | number = null

const click = () => (show.value = false)
const begin = () => {
  timer = setInterval(() => {
    count.value -= 1
    if (count.value <= 0) {
      clearInterval(timer as number)
      timer = null
      show.value = false
    }
  }, 1000)
}
const use = _.throttle(() => emits('on:use'), 5000)
const close = () => (show.value = false)
watch(
  () => show.value,
  (n, o) => {
    if (n && !o) {
      count.value = 10
      begin()
    }
  }
)
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
const gocoupon = () => {
  router.replace({ name: 'UserCoupon' })
}
</script>

<style scoped></style>
